<template lang="html">
  <div>
    <div class="search">

        <div class="input">
            <p><label>姓名：</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.name"></el-input></p>
            <p>
              <label>审核状态：</label>
              <el-select v-model="pageData.type" placeholder="请选择">
                <el-option value="">请选择</el-option>
                 <el-option
                   v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
               </el-select>
            </p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center" width='320px'>
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.authStatus !== '审核通过'"
                  size="mini"
                  type='primary'
                  @click="audit(scope.row)">审核
                </el-button>
                <el-button
                  size="mini"
                  type='primary'
                  @click="details(scope.row)">详情
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                    class="del"
                  @click="handleEdit(scope.row)">删除
                </el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
      <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
            <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
              <el-form-item label="认证状态" prop="authStatus">
                <el-select v-model="pageData.authStatus" placeholder="请选择">
                  <el-option value="">请选择</el-option>
                   <el-option
                     v-for="item in type"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item>
               <el-form-item label="审核描述">
                   <el-input v-model="pageData.description" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item class="confirm">
                   <el-button type="primary" @click="submitForm()">提交</el-button>
                </el-form-item>
            </el-form>
        </slot>
    </dialogVue>
  </div>
</template>

<script>
  import Data from './realApproveData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    realApproveList,
    realApproveAudit,
    delRealApprove
  } from "@/api/userCenter/userCenter";
  export default {
    components : {
      tableVue,
      dialogVue
  },
   data () {
     return JSON.parse(JSON.stringify(Data))
   },
   mounted () {
     this.getrealApproveList();
   },
   methods : {
     getrealApproveList (data) {//实名认证列表
          this.pageData.loading = true;
       realApproveList(data).then(res=>{
         if (res.data.code == 'OK') {
           this.pageData.loading = false;
           this.total = res.data.data.total;
           this.list.tbody = res.data.data.records.map(item=>{
              if (item.authStatus == '1') {
                item.authStatus = '已提交';
              } else if (item.authStatus == '2') {
                item.authStatus = "审核通过";
              } else {
                item.authStatus = "审核未通过";
              }
              item.cardType  = item.cardType == '10' ?'身份证':'不晓得';
              item.description  = item.description == '' ?'暂无描述': item.description;
              item.nagativePicture  = item.nagativePicture == '' ?'暂无图片': item.nagativePicture;
              item.handerPositivePicture  = item.handerPositivePicture == '' ?'暂无图片': item.handerPositivePicture;
              item.positivePicture  = item.positivePicture == '' ?'暂无图片': item.positivePicture;
              item.gmtCreate = this.switchTime(item.gmtCreate);
              item.gmtUpdate = this.switchTime(item.gmtUpdate);
              return item;
           });
         } else {
           setTimeout(()=>{
            this.pageData.loading = false;
           },2000)
         }
       })
     },
     audit (item) {
       this.dialog = true;
       this.realId = item.realId
       this.pageData = {};
        // this.$refs.ruleForm.resetFields()
     },
     details (item) {
      this.$router.push({
        name : 'realApprovedetails',
        query : {
          item : JSON.stringify(item)
        }
      })
     },
     submitForm () {
         this.$refs.ruleForm.validate((valid) => {
           if (valid) {
             var data = {
               realId :this.realId,
               authStatus : this.pageData.authStatus,
               description : this.pageData.description,
             }
             realApproveAudit(data).then(res=>{
               if (res.data.code == 'OK') {
                  this.getrealApproveList();
                  this.$message.success('审核成功');
                   this.dialog = false;
               } else {
                   this.$message.error(res.data.message);
               }
             })
           }
         });
      },
     handleEdit (item) {
       this.delMessage(()=>{
         delRealApprove(item.realId).then(res=>{
           if (res.data.code == 'OK') {
               this.$message.success('删除成功');
               this.getrealApproveList();
           } else {
             this.$message.error(res.data.message);
           }
         })
       })
     },
     changeData (val) {
       this.dialog = val;
     },
     search () {
       var data = {
         realName : this.pageData.name,
         authStatus : this.pageData.type,
       }
       this.getrealApproveList(data);
    },
     handSize (val) {
       var data = {
         realName : this.pageData.pageData,
         authStatus : this.pageData.type,
         current : val,
         size : '10'
       }
       this.getrealApproveList(data);
     },
   }
}
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
  text-align: center;
}
.el-input {
  width:160px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.el-form-item__content {
  margin-left: 120px !important;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.dels {
  margin-left: 10px;
}
</style>
